import "./login.scss"

function Login() {
  return (
    <div className="login">
      <div className="login-dialog">
        <img
          className="close-icon"
          src="https://dig.chouti.com/images/close-8809a1ad23.png"
        />
        {/* 标题 */}
        <div className="auto-center">
          <div className="login-head">
            <img src="https://dig.chouti.com/images/Line-3-6@2x-ea9450509e.png" />
            <span className="title">不正经的资讯社区</span>
            <img src="https://dig.chouti.com/images/Line-3-7@2x-3e1c54cdb1.png" />
          </div>
        </div>
        {/* 登陆选择 */}
        <div className="login-type">
          <a className="link-normal active phone-login">手机号登录</a>
          <a className="link-normal username-login">用户名登录</a>
        </div>
        {/* 手机号input */}
        <div className="login-body">
          <div className="login-item">
            <div className="select-current">
              <span className="current-country select-value">中国+86</span>
              <img
                src="https://dig.chouti.com/images/triangle2-c9486adb57.png"
                className="select-icon"
              />
            </div>
            {/* 输入框 */}
            <div className="input-item">
              <input
                type="text"
                className="input login-phone"
                placeholder="手机号"
              />
            </div>
          </div>
        </div>
        {/* 底部 */}
        <div className="login-footer">
          {/* 密码 */}
          <div className="login-item">
            <div className="input-item" style={{ width: "100%" }}>
              <input
                type="password"
                maxLength={16}
                className="input pwd-input pwd-input-active pwd-password-input"
                placeholder="密码"
              />
              <img
                src="https://dig.chouti.com/images/eyes@2x-58efb50695.png"
                className="eyes-icon eye-close"
              />
            </div>
          </div>
          <div className="mt18"></div>
          {/* 忘记密码 */}
          <div
            className="form-item mt24 clearfix"
            style={{ width: 344, height: 20 }}
          >
            <div className="right">
              <a className="link-normal link-active forget-tips">忘记密码?</a>
            </div>
          </div>
          {/* 登录按钮 */}
          <div
            className="form-item mt24 clearfix"
            style={{ width: "100%", height: 44 }}
          >
            <button className="btn-large login-btn">登录</button>
          </div>
          {/* 注册 */}
          <div
            className="form-item mt24 center"
            style={{ width: 344, height: 18 }}
          >
            <div className="bottom-tips">
              还没加入抽屉？马上去
              <a className="link-normal link-active">注册</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
export default Login;
